<template>
	<view class="container999">
		<view class='nav'>
			<!-- 导航栏 -->
			<view class='navTab'>
				<view v-for="(item,index) in agents" :key="index" class='navTabItem' :class="index===tabClick?'click':''" @click='navClick(index)'>{{item.title}}</view>
			</view>
			<view class="underlineBox" :style='"transform:translateX("+isLeft+"px)"'>
				<view class="underline"></view>
			</view>
		</view>
		<swiper :style="{height:isHeight}" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(item,index) in agents" :key="index">
				<view class='content'>
					<view class='card' v-for="(listItem,listIndex) in item.list" v-if="item.list.length > 0" :key="listIndex">
						{{listItem.content}}
					</view>
				</view>
				<view class='noCard' v-if="item.list.length===0">
					暂无信息
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import{mapState} from "vuex";
	export default {
		computed: mapState(['URL']),
		data() {
			return {
				currentTab: 0,
				tabClick:0,
				isHeight: '',
				isLeft: 0,
				agents:[{
					title:'流浪狗',
					list:[]
				},{
					title:'曝光台',
					list:[{id:12,conten:'sad12fsd1'},{id:12,conten:'sad12fsd1'},{id:12,conten:'sad12fsd1'},{id:12,conten:'sad12fsd1'},{id:12,conten:'sad12fsd1'},]
				},{
					title:'犬只举报',
					list:[]
				}],
				isWidth:0,
				reqData: {
					pageNumber: 0,
					pageSize: 20
				}
			}
		},
		mounted() {
			// 设置swiper高度
			this.isHeight = this.agents[0].list.length * 420 + 160 + 'rpx'
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth/that.agents.length
				}
			})
			this.getList();
		},
		methods: {
			// 导航栏点击
			navClick(index) {
					this.currentTab = index
					this.tabClick = index
			},
			// swiper 滑动
			swiperTab: function(e) {
				console.log(e)
				var index = e.detail.current //获取索引
				this.isHeight = this.agents[index].list.length * 420 + 160 + 'rpx' //设置swiper高度
				this.isLeft = index*this.isWidth //设置下划线位置
				this.currentTab = e.detail.current //设置swiper的第几页
				this.tabClick = e.detail.current //设置导航点击了哪一个
			},
			getList() {
				// this.isMore = 'loading';
				uni.request({
					url: this.URL + "exposedList",
					data: this.reqData,
					success: (res) => {
						console.log("流浪犬举报");
						console.log(res.data);
						this.agents[0].list =res.data.data;

						// this.agents[0].splice(0,1,res.data.data)
						// uni.stopPullDownRefresh();
						// setTimeout(() => {
						// 	this.isXiaLa = true;
						// }, 5000);
						// this.agents[0] = [...this.agents[0], ...res.data.data];
						// if (res.data.total <= this.agents[0].length + this.reqData.pageNumber) {
						// 	this.isMore = 'noMore'
						// 	this.isLa = false;
						// };
						// this.reqData.pageNumber += this.reqData.pageSize;
					}
				})
			},
		},
		onPullDownRefresh() {
			console.log(`刷新第${this.currentTab}项`)
			uni.stopPullDownRefresh()
			uni.showLoading({
				content:'刷新中'
			})
			setTimeout(()=>{
				uni.hideLoading()
			},1000)
		},
		onReachBottom(){
			console.log(`加载${this.currentTab}`)
			uni.showLoading({
				content:'加载中'
			})
			setTimeout(()=>{
				uni.hideLoading()
			},1000)
		}
	}
</script>

<style>
	.content {
		width: 100%;
		margin-top: 140upx;
	}
	.card {
		width: 90%;
		height: 368upx;
		background-color: white;
		margin: 0 auto 42upx auto;
		background: #FFFFFF;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
		border-radius: 5px;
		position: relative;
	}
	.noCard {
		width: 90%;
		height: 200upx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10upx;
	}
	swiper {
		min-height: 90vh;
	}
	.navTab {
		display: flex;
		width: 100%;
		height: 90upx;
		position: relative;
		color: rgba(255, 255, 255, 0.50);
	}
	.click {
		color: white;
	}
	.underline {
		width: 84upx;
		height: 3px;
		background-color: white;
	}
	.underlineBox{
		width: 33%;
		height: 3px;
		display: flex;
		align-content: center;
		justify-content: center;
		transition: .5s;
	}
	.navTabItem {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		font-size: 28upx;
	}

	.nav {
		position: fixed;
		left: 0;
		top: 0;
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 24upx;
		background-color: #fcd700;
		z-index: 996;
	}

	.searchInput999 {
		width: 90%;
		margin: 0 auto;
		background: white;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56upx;
	}

	.search999 {
		width: 32upx;
		height: 32upx;
	}

	.searchBox999 {
		width: 56upx;
		height: 56upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.input999 {
		color: #999;
		width: 80%;
	}
</style>
